import React, { useEffect } from "react";
import * as echarts from "echarts";
import { CSSProperties } from "react";

// 定义组件的属性接口（如果有的话）
interface BarChartProps {
  // 这里可以定义一些可选或必选的属性
}

const BarChart: React.FC<BarChartProps> = () => {
  useEffect(() => {
    // 获取 DOM 元素
    const chartDom = document.getElementById("main");
    if (!chartDom) {
      console.error("DOM element with id 'main' not found.");
      return;
    }

    // 初始化 ECharts 图表
    const myChart = echarts.init(chartDom);

    // 绘制图表
    myChart.setOption({
      title: {
        text: "ECharts 入门示例",
      },
      tooltip: {},
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    });

    // 清理图表实例，避免内存泄漏
    return () => {
      myChart.dispose();
    };
  }, []);

  const chartStyle: CSSProperties = {
    width: 600,
    height: 400,
  };

  return <div id="main" style={chartStyle}></div>;
};

export default BarChart;
